<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="search_box"
		:style="{'margin-top':`calc(${menuButtonInfo.top}px - (80rpx - ${menuButtonInfo.height}px)/2)`,'width':`calc(${menuButtonInfo.left}px - 2 * (100% - ${menuButtonInfo.right}px))`,'margin-left':`calc(100% - ${menuButtonInfo.right}px)`}">
		<navigator class="msg_box" open-type="navigateBack" delta="1">
			<image src="/static/icon/back.png"></image>
		</navigator>
		<view class="input_box" url="/pages/search/search">
			<image src="/static/icon/magnifier.png" class="magnifier"></image>
			<input v-model="keyword" class="input" @input="search" confirm-type="search" @confirm="confirmTap"></input>
			<image src="/static/icon/clear.png" class="magnifier" @click="keyword=''" v-if="keyword"></image>
		</view>
		<text v-if="!keyword">搜索</text>
		<navigator v-else open-type="navigateBack" delta="1">取消</navigator>
	</view>
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN -->
	<view class="search_box" style="margin-left: 36rpx;margin-right: 36rpx;width: 678rpx;padding-top: 30rpx;">
		<view class="input_box" url="/pages/search/search">
			<image src="/static/icon/magnifier.png" class="magnifier"></image>
			<input v-model="keyword" class="input" @input="search" confirm-type="search" @confirm="confirmTap"></input>
			<image src="/static/icon/clear.png" class="magnifier" @click="keyword=''" v-if="keyword"></image>
		</view>
		<text v-if="!keyword">搜索</text>
		<navigator v-else open-type="navigateBack" delta="1">取消</navigator>
	</view>
	<!-- #endif -->
	<scroll-view class="safe p" scroll-y direction="vertical"
		:style="{'top':`calc(${menuButtonInfo.top}px - (80rpx - ${menuButtonInfo.height}px)/2 + 100rpx)`}">
		<template v-if="!keyword">
			<template v-if="searchHistory.length>0">
				<view class="title_box">
					<image src="/static/search/history.png" mode="heightFix"></image>
					<image src="/static/icon/delete.png" mode="heightFix" @click="this.$refs.popup.open()"></image>
				</view>
				<view class="history_box">
					<template v-for="(item,index) in searchHistory" :key="item">
						<view v-if="more || index<15" @click="this.keyword=item;this.search();this.confirm = true;">
							{{item}}
						</view>
					</template>
					<view style="padding: 0;height: 55rpx;width: 55rpx;" v-if="searchHistory.length>15"
						@click="more=!more">
						<image src="/static/icon/jiantou_3.png" :style="{'transform': `rotate(${more?180:0}deg)`}" />
					</view>
				</view>
			</template>
			<view class="title_box">
				<image src="/static/search/hot.png" mode="heightFix"></image>
			</view>
			<view class="history_box" style="margin-bottom: 36rpx;">
				<template v-for="item in indexInfo?.homePageConfig.home_6" :key="item.id">
					<navigator :url="'/pages/category/category?info='+JSON.stringify(item)"
						style="background-color: #FEFCE8;padding: 0 20rpx 0 0;" v-if="item.label=='爆'">
						<view
							style="margin-right: 10rpx;color:#020618;font-weight: bold;font-size: 28rpx;border-radius: 18rpx 0 18rpx 18rpx;background: linear-gradient( 153deg, #FEF9C2 0%, #FFDF20 50%, #FFDF20 100%), #FFDF20;">
							爆</view>{{item.name}}
					</navigator>
					<navigator :url="'/pages/category/category?info='+JSON.stringify(item)"
						style="background-color: #FEF2F2;padding: 0 20rpx 0 0;" v-else-if="item.label=='热'">
						<view
							style="margin-right: 10rpx;color:#ffffff;font-weight: bold;font-size: 28rpx;border-radius: 18rpx 0 18rpx 18rpx;background: linear-gradient( 134deg, #FF8904 0%, #FB2C36 50%, #FB2C36 100%);">
							热</view>{{item.name}}
					</navigator>
					<navigator :url="'/pages/category/category?info='+JSON.stringify(item)" v-else>{{item.name}}
					</navigator>
				</template>
			</view>

			<image src="/static/search/hot_bg.png" mode="widthFix" style="width: 750rpx;"></image>

			<navigator class="item" :url="'/pages/category/category?info='+JSON.stringify(item)"
				v-for="(item,index) in indexInfo?.homePageConfig?.home_3" :key="item.id">
				<image :src="item.imgUrl" lazy-load></image>
				<view class="paiming">
					<image :src="`/static/icon/ranked_${index+1}.png`"></image>
					<view :style="{'color':index<2?'#ffffff':'#020618'}">{{index+1}}
					</view>
				</view>
				<view class="right_box">
					<view class="title">{{item.name}}</view>
					<view class="bottom_box2">
						<view class="i1">已成交<view style="margin-left: 10rpx;">{{item.label}}</view>
						</view>
						<view class="i2"
							style="background: linear-gradient(90deg, rgba(255, 223, 32, 0.1) 0%, rgba(0, 201, 80, 0) 100%);">
							<image src="/static/icon/xingxing.png" lazy-load></image>
							<text>最近1小时内成交 <text>{{item.actualNum}}</text>
								单</text>
						</view>
					</view>
				</view>
			</navigator>
			<image src="/static/search/zhekou_bg.png" mode="widthFix" style="width: 750rpx;"></image>

			<navigator class="item" :url="'/pages/category/category?info='+JSON.stringify(item)"
				v-for="(item,index) in indexInfo?.homePageConfig?.home_4" :key="item.id">
				<image :src="item.imgUrl" lazy-load></image>
				<view class="paiming">
					<image :src="`/static/icon/ranked_${index+1}.png`"></image>
					<view :style="{'color':index<2?'#ffffff':'#020618'}">{{index+1}}
					</view>
				</view>
				<view class="right_box">
					<view class="title">{{item.name}}</view>
					<view class="bottom_box2">
						<view class="i1">
							<view style="margin-right: 10rpx;">{{item.label}}</view>回收
						</view>
						<view class="i2"
							style="background: linear-gradient(90deg, rgba(142, 81, 255, 0.1) 0%, rgba(255, 223, 32, 0) 100%);">
							<image src="/static/icon/zuanshi.png" lazy-load></image>
							<text>性价比指数：<text>{{item.num || (index==0?100:(index==1?98:95))}}</text></text>
						</view>
					</view>
				</view>
			</navigator>
		</template>
		<template v-else>
			<template v-if="list.length==0 && confirm">
				<image src="/static/icon/none.png"
					style="height: 200rpx;width: 200rpx;margin-top: 150rpx;margin-left: 275rpx;">
				</image>
				<view class="none_text">暂无结果，换个词搜搜看</view>
			</template>
			<view class="i" v-for="item in list" :key="item.id" @click="tiaozhuan(item)">
				<image :src="item.imageUrl" lazy-load />
				<text class="ellipsis">{{item.name}}</text>
			</view>
		</template>
	</scroll-view>

	<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff" safe-area>
		<view
			style="display: flex;align-items: center;justify-content: flex-end;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="this.$refs.popup.close()">
			</image>
		</view>
		<view
			style="width: 100%;height: 280rpx;display: flex;align-items: center;justify-content: center;font-size: 34rpx;">
			确认删除全部历史记录？
		</view>
		<view class="from_btn_box">
			<view class="reset" @click="this.$refs.popup.close()">取消</view>
			<view class="submit" @click="clearSearchHistory">确定</view>
		</view>
	</uni-popup>
</template>

<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				menuButtonInfo: {},
				indexInfo: null,
				more: false,
				keyword: '',
				allList: [],
				list: [],
				confirm: false,
				searchHistory: [],
			}
		},
		async onLoad() {
			let searchHistory = uni.getStorageSync('search-history');
			this.searchHistory = searchHistory || [];
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.indexInfo = await getApp().getIndexInfo();

			let excludeValue = await getApp().getExcludeValue();
			let {
				result = []
			} = await api.search(excludeValue);
			this.allList = result;
			this.list = [];
		},
		methods: {
			search() {
				this.confirm = false;
				this.list = this.allList.filter(e => {
					return e.name.indexOf(this.keyword) > -1;
				})
			},
			confirmTap() {
				this.confirm = true;
				this.setStorage();
			},
			tiaozhuan(item) {
				this.setStorage();
				uni.navigateTo({
					url: '/pages/category/category?info=' + JSON.stringify(item)
				})
			},
			setStorage() {
				if (!this.keyword || !this.keyword.trim()) {
					return;
				}
				let searchHistory = uni.getStorageSync('search-history');
				if (!searchHistory) {
					searchHistory = [];
				} else {
					searchHistory = searchHistory.filter(e => e != this.keyword);
				}
				searchHistory.unshift(this.keyword);
				if (searchHistory.length > 30) {
					searchHistory = searchHistory.slice(0, 30);
				}
				this.searchHistory = searchHistory;
				uni.setStorageSync('search-history', searchHistory);
			},
			clearSearchHistory() {
				this.searchHistory = [];
				uni.removeStorageSync('search-history');
				this.$refs.popup.close();
				uni.showToast({
					title: '删除成功',
					icon: 'success',
					duration: 1500
				})
			},
		}
	}
</script>

<style>
	@import url('@/css/search.css');

	page {
		background-color: #ffffff;
	}

	.p {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}

	.title_box {
		margin: 36rpx;
		height: 40rpx;
		width: 678rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title_box image {
		height: 40rpx;
	}

	.history_box {
		width: 678rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-left: 36rpx;
	}

	.history_box navigator,
	.history_box view {
		min-height: 55rpx;
		background-color: #F8FAFC;
		border-radius: 18rpx;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		line-height: 35rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.history_box navigator image,
	.history_box view image {
		height: 35rpx;
		width: 35rpx;
	}


	.item {
		width: 678rpx;
		margin-left: 36rpx;
		height: 100rpx;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
	}

	.item image:first-child {
		height: 100rpx;
		width: 100rpx;
	}

	.item .right_box {
		margin-left: 30rpx;
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.item .right_box .title {
		font-size: 30rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.item .right_box .bottom_box2 {
		height: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 22rpx;
		color: #62748E;
	}

	.item .right_box .bottom_box2 .i1 {
		width: 150rpx;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.item .right_box .bottom_box2 .i1 view {
		font-weight: bold;
		height: 40rpx;
		line-height: 40rpx;
		color: #000000;
		text-decoration: underline 6rpx #FFDF20;
		/* 防止下划线避开字母降部 */
		text-decoration-skip-ink: none;
		/* 微调下划线位置使其更贴近文字 */
		text-underline-offset: -6rpx;
	}

	.item .right_box .bottom_box2 .i2 {
		padding: 0 20rpx;
		height: 40rpx;
		border-radius: 24rpx 0px 0px 24rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.item .right_box .bottom_box2 .i2 image {
		height: 32rpx;
		width: 32rpx;
		margin-right: 20rpx;
	}

	.item .right_box .bottom_box2 .i2 text text {
		font-weight: bold;
		color: #000000;
	}

	.i {
		width: 678rpx;
		height: 120rpx;
		margin-left: 36rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 30rpx;
	}

	.i image {
		height: 100rpx;
		width: 100rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.paiming {
		height: 48rpx !important;
		width: 48rpx !important;
		position: absolute;
		left: 76rpx;
		top: -4rpx;
	}

	.paiming image {
		height: 48rpx !important;
		width: 48rpx !important;
		position: absolute;
		top: 0;
		left: 0;
	}

	.paiming view {
		height: 48rpx;
		width: 48rpx;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>